<template>
    <div class="">
        <el-card class="table">
            <el-form :model="queryParams" :rules="rule" ref="formRef">
                <el-form-item prop="title" label="文章标题">
                    <el-input v-model="queryParams.title" placeholder="请输入文章标题"  clearable/>
                </el-form-item>
                <el-form-item prop="description" label="文章描述">
                    <el-input v-model="queryParams.description" placeholder="请输入文章描述"  clearable/>
                </el-form-item>
            </el-form>
            <el-tabs v-model="activeName">
                <el-tab-pane name="first" label="markdown">
                    <Markdown @success="successFn"></Markdown>
                </el-tab-pane>
            </el-tabs>
        </el-card>
        <!-- <div class="tu"></div> -->
    </div>
</template>

<script setup>
import {ref} from 'vue'
import {addArticle} from '@/apis/article'
import Markdown from './components/Markdown.vue'
import { ElMessage } from 'element-plus';

const queryParams = ref({
    title:'',
    description:'',
    content:''
})
const formRef = ref(null)
const rule = ref({
    title:{required:true,message:'文章标题是必填项',trigger: 'bulr'},
    description:{required:true,message:'文章描述是必填项',trigger: 'bulr'},
})


const activeName = ref('first')

const successFn = (value)=>{
    queryParams.value.content = value
    formRef.value.validate(async (value)=>{
        console.log(value);
        if (value){
            const {data} = await addArticle(queryParams.value)
            if (!data.code){
                ElMessage.success(data.txt)
            }else{
                ElMessage.success(data.txt)
            }
        }
    })
}

</script>


<style lang="scss" scoped>
:deep(.el-input){
    width:50% !important
}
.tu{
    width: 100px;
    height: 100px;
    background-color: red;
    background: url(./components/favicon.ico);
}
</style>